<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Add Your favicon here -->
<link rel="icon" href="${ctx}/resource/v2/img/favicon.ico">

<title>西安三星 SW 综合系统 Samsung XIAN SW Comprehensive System</title>

<!-- datepicker -->
<link href="${ctx}/resource/v2/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<link href="${ctx}/resource/v2/css/datepicker3.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="${ctx}/resource/v2/css/bootstrap.min.css" rel="stylesheet">

<!-- Animation CSS -->
<link href="${ctx}/resource/v2/css/animate.min.css" rel="stylesheet">

<link href="${ctx}/resource/v2/css/font-awesome.min.css" rel="stylesheet">
<link href="${ctx}/resource/v2/css/custome.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="${ctx}/resource/v2/css/style.css" rel="stylesheet">
<link href="${ctx}/resource/v2/css/cfe.css" rel="stylesheet">
<style type="text/css">
	.label {
		font-family: 'Open Spans';
	}
	.label-primary, .badge-primary {
	    background-color: #1ab394;
	    color: #FFFFFF;
	}
	.text-navy {
   		color: #1ab394;
	}
	.text-info {
    	color: #23c6c8;
	}
	s, strike, del {
    	text-decoration: line-through;
	}
	.label-danger, .badge-danger {
	    background-color: #ed5565;
	    color: #FFFFFF;
	}
</style>
</head>
<body id="page-top">
	<div class="navbar-wrapper">
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header page-scroll">
					<button type="button" class="navbar-toggle collapsed"
						data-toggle="collapse" data-target="#navbar" aria-expanded="false"
						aria-controls="navbar">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#"><i class="fa fa-bold ">-VLLT</i></a>
				</div>
				<div id="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<li><a class="page-scroll features-icon-smaller"
							href="${ctx}/index.do">首页</a></li>
						<li><a class="page-scroll features-icon-smaller" href="#vote">投票</a></li>
						<li><c:choose>
								<c:when test="${!empty sessionScope.LOGINED_USER.uid}">
									<a class="page-scroll features-icon-smaller"
										href="${ctx}/center/home/index.html"> <img
										style="width: 29px; height: 29px; border-radius: 50px; margin-top: -2px;"
										alt="" src="${ctx}${sessionScope.LOGINED_USER.userImage}" />&nbsp;${sessionScope.LOGINED_USER.name}
									</a>
									<a class="features-icon-smaller" href="${ctx}/user/logout.do"
										id="logout"><i class="fa fa-sign-out"></i>退出</a>
								</c:when>
								<c:otherwise>
									<a class="features-icon-smaller" id="login" href="${ctx}/user/loginPage.do"><i
										class="fa fa-sign-in"></i>登录</a>
								</c:otherwise>
							</c:choose></li>
						<li><a class="features-icon-smaller" id="center"
							href="${ctx}/center/home/index.html"><i class="fa fa-user"></i>个人中心</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>
	<div id="inSlider" class="carousel slide carousel-fade"
		data-ride="carousel">
		<ol class="carousel-indicators">
			<li data-target="#inSlider" data-slide-to="0" class="active"></li>
			<li data-target="#inSlider" data-slide-to="1"></li>
		</ol>
		<div class="carousel-inner" role="listbox">
			<div class="item active">
				<div class="container">
					<div class="carousel-caption">
						<h1>
							西安三星 SW 综合系统 <br /> Samsung XIAN SW <br />Comprehensive System<br />
						</h1>
						<p>我们专注于提供各种细微服务：抽奖，投票，抽签，计时等等</p>
						<!-- <p>
                        <a class="btn btn-lg btn-primary" href="#" role="button">READ MORE</a>
                        <a class="caption-link" href="#" role="button">Inspinia Theme</a>
                    </p> -->
					</div>
					<div class="carousel-image wow zoomIn">
						<img src="${ctx}/resource/v2/img/laptop.png" alt="laptop" />
					</div>
				</div>
				<!-- Set background for slide in css -->
				<div class="header-back one"></div>

			</div>
			<div class="item">
				<div class="container">
					<div class="carousel-caption blank">
						<h1>
							我们的应用非常的灵活和简单 <br />操作便利，获取结果迅捷
						</h1>
						<p>请相信我们的服务源于您对我们的信任</p>
						<!-- <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> -->
					</div>
				</div>
				<!-- Set background for slide in css -->
				<div class="header-back two"></div>
			</div>
		</div>
		<a class="left carousel-control" href="#inSlider" role="button"
			data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"
			aria-hidden="true"></span> <span class="sr-only">Previous</span>
		</a> <a class="right carousel-control" href="#inSlider" role="button"
			data-slide="next"> <span
			class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>

	<section class="container features services" id="vote">
		<!-- 业务部分  开始  -->
	    <div class="row wrapper white-bg animated rollIn min-height">
	   		<div class="row">
	          <div class="col-lg-12">
	              <div class="ibox float-e-margins">
	                  <div class="ibox-title">
	                      <h5>所有的投票信息 <small class="text-navy">所有的投票信息，你可以在此进行投票操作</small></h5>
	                  </div>
	                  <div class="ibox-content">
	                      <form class="form-horizontal" method="post">
						<div class="form-group">
							<label class="col-sm-1 control-label">投票标题</label>
							<div class="col-sm-3">
								<input type="text" name="search_title" class="form-control" placeholder="输入投票标题进行搜索">
							</div>
							<label class="col-sm-1 control-label">创建时间</label>
							<div class="col-sm-4">
								<div class="row">
	                                         <div id="data_1" class="col-md-6">
	                                          <div class="input-group date">
											<span class="input-group-addon">
											<i class="fa fa-calendar"></i></span>
												<input type="text" name="startDate" class="form-control" placeholder="开始日期">
										</div>
	                                         </div>
	                                         <div id="data_1" class="col-md-6">
	                                         	<div class="input-group date">
											<span class="input-group-addon">
											<i class="fa fa-calendar"></i></span>
												<input type="text" name="endDate" class="form-control" placeholder="结束日期">
										</div>
	                                         </div>
	                                     </div>
							</div>
						 	<div class="col-sm-3">
	                                      <button type="button" class="btn btn-primary">搜索</button>
	                                   <button type="reset" class="btn btn-white">重置</button>
	                                 </div>
						</div>
					</form>
	                         <table class="table table-responsive table-hover text-center">
	                             <tbody id="voteListTBodyId">
	                              <tr class="info" style="font-weight: bold;">
	                                  <td>编号</td>
	                                  <td>投票主题</td>
	                                  <td>投票权限</td>
	                                  <td>投票热度</td>
	                                  <td>投票状态</td>
	                                  <td>创建时间</td>
	                                  <td>结束时间</td>
	                              </tr>
	                             </tbody>
	                         </table>
	                         <div id="laypageId" class="text-right">
	                         </div>
						</div>
	              </div>
	          </div>
	      </div>
	     </div>
	</section>

	<section id="contact" class="gray-section contact">
		<div class="container">
			<div class="row m-b-lg">
				<div class="col-lg-12 text-center">
					<div class="navy-line"></div>
					<h1>联系我们</h1>
					<p>我们是Track1</p>
				</div>
			</div>
			<div class="row m-b-lg">
				<div class="col-sm-4 wow fadeInLeft">
					<div class="team-member">
						<img src="${ctx}/resource/v2/img/avatar5.jpg"
							class="img-responsive img-circle img-small" alt="">
						<h4>
							<span class="navy">皮带</span>●黄
						</h4>
						<p>本系统总架构师，负责设计，优化，重构，维护以及拓展新功能等各种烦人事宜。是一个年轻的极客和彪悍的攻城略地师长，最主要的还是娃他爸。</p>
						<ul class="list-inline social-icon">
							<li><a href="#"><i class="fa fa-qq"></i></a></li>
							<li><a href="#"><i class="fa fa-weibo"></i></a></li>
							<li><a href="#"><i class="fa fa-weixin"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="team-member wow zoomIn">
						<img src="${ctx}/resource/v2/img/avatar9.jpg"
							class="img-responsive img-circle" alt="">
						<h4>
							<span class="navy">晶晶</span>●王
						</h4>
						<p>网站代言人。Track1一级演员。最擅长反串，饰演各种娘们，而且塑造的角色性格显眼，特点突出。在手游王者荣耀最爱使用英雄亚瑟，没有最猥琐，只有更猥琐。</p>
						<ul class="list-inline social-icon">
							<li><a href="#"><i class="fa fa-qq"></i></a></li>
							<li><a href="#"><i class="fa fa-weibo"></i></a></li>
							<li><a href="#"><i class="fa fa-weixin"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="col-sm-4 wow fadeInRight">
					<div class="team-member">
						<img src="${ctx}/resource/v2/img/avatar7.jpg"
							class="img-responsive img-circle img-small" alt="">
						<h4>
							<span class="navy">愣头青</span>●杨
						</h4>
						<p>
							工程媛，负责详细功能实现。灭绝师太第N代传人，性格火爆，嫉恶如仇，爱憎分明，对的是对的，错的也是对的。逆我者亡，顺我者昌。欢迎找虐。</p>
						<ul class="list-inline social-icon">
							<li><a href="#"><i class="fa fa-qq"></i></a></li>
							<li><a href="#"><i class="fa fa-weibo"></i></a></li>
							<li><a href="#"><i class="fa fa-weixin"></i></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12 text-center">
					<a href="mailto:test@email.com" class="btn btn-primary">发送邮件给我们</a>
					<p class="m-t-sm">或者在社交平台上关注我们</p>
					<ul class="list-inline social-icon">
						<li><a href="#"><i class="fa fa-qq"></i></a></li>
						<li><a href="#"><i class="fa fa-weibo"></i></a></li>
						<li><a href="#"><i class="fa fa-weixin"></i></a></li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2 text-center m-t-lg m-b-lg">
					<p>
						<strong>&copy; 2016 西安三星 SW</strong>All Rights Reserved By
						Samsung.
					</p>
				</div>
			</div>
		</div>
	</section>

	<a href="#inSlider" id="gotop" class="go2top"><i
		class="fa fa-arrow-up "></i></a>
	<input id="contextPath" type="hidden" value="${ctx}">

	<!--依赖的js-->
	<script src="${ctx}/resource/v2/js/jquery-2.1.1.js"></script>
	<script src="${ctx}/resource/v2/js/pace.min.js"></script>
	<script src="${ctx}/resource/v2/js/bootstrap.min.js"></script>
	<script src="${ctx}/resource/v2/js/classie.js"></script>
	<script src="${ctx}/resource/v2/js/cbpAnimatedHeader.js"></script>
	<script src="${ctx}/resource/v2/js/wow.min.js"></script>
	<script src="${ctx}/resource/v2/js/inspinia.js"></script>
	<script src="${ctx}/resource/v2/layer/layer.js"></script>


	<!-- Color picker -->
    <script type="text/javascript" src="${ctx}/resource/v2/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="${ctx}/resource/v2/js/bootstrap-colorpicker.min.js"></script>
	
	<!-- laypage -->
	<script type="text/javascript" src="${ctx}/resource/laypage/laypage.js"></script>
	<script type="text/javascript" src="${ctx}/resource/laypage/laytpl.js"></script>
	
    <!-- iCheck -->
    <script src="${ctx}/resource/v2/js/icheck.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
            $("form:last").submit(function(e){
                alert("Submitted");
              });
        });
    </script>
    <script>
        //datepicker
        $('#data_1 .input-group.date').datepicker({
            todayBtn: "linked",
            todayHighlight: true,
        	language: "zh",
        	format: "yyyy-mm-dd",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
        });
        $('#data_2 .input-group.date').datepicker({
            todayBtn: "linked",
            todayHighlight: true,
        	language: "zh",
        	format: "yyyy-mm-dd",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });
        
      //搜索
      $("form [type='button']:eq(0)").click(function(){
    	  voteList.getPageList(1);
      });
     //get vote list
     $(function(){
    	 voteList.getPageList(1);
     });
     var voteList = {
   		getPageList:function(curr){
			var load = layer.load(0);
			try{
	  			$.ajax({
	   				type: "post",
	   				url: "${ctx}/vote/voteListData.do",
	   				data: $("form").serialize()+"&currentPage="+curr,
	   				dataType:"json",
	   				success:function(data){
	   					var gettpl = document.getElementById("voteListTrId").innerHTML;
	   					laytpl(gettpl).render(data.resultMap,function(html){
	   						$("table tbody").html(html);
	  	 					document.getElementById("voteListTBodyId").innerHTML=html;
	   					});
	   					//显示分页
	   			        laypage({
	   			            cont: 'laypageId', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
	   			            pages: data.page.totalPageCount, //通过后台拿到的总页数
	   			            curr: curr || 1, //当前页
	   			            skin: 'molv', //皮肤
	   			    	    first: 1, //将首页显示为数字1,。若不显示，设置false即可
	   			    	    last: false, //将尾页显示为总页数。若不显示，设置false即可
	   			    	    prev: '<', //若不显示，设置false即可
	   			    	    next: '>', //若不显示，设置false即可
	   			            jump: function(obj, first){ //触发分页后的回调
	   			                if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
	   			                	voteList.getPageList(obj.curr);
	   			                }
	   			            }
	   			        });
	   			     	layer.close(load);
	   				},
	  				error:function(e){
	  					layer.close(load);
	  					if(e.readyState == 0){
	  						layer.msg("服务器拒绝了我们的连接请求，请检查网络连接或者服务器是否启动", {time: 5000, icon:6});
	  					}
	  					console.log(JSON.stringify(e));
	  				}
	  			});
			}catch(e){
				console.log(e);
			}finally{
				//layer.close(load);
			}
		}
	};
    </script>
    <script id="voteListTrId" type="text/html">
		<tr class="info" style="font-weight: bold;">
        	<td>编号</td>
        	<td>投票主题</td>
        	<td>投票权限</td>
        	<td>投票热度</td>
       	 	<td>创建时间</td>
        	<td>结束时间</td>
    	</tr>
		{{# for(var i = 0; i<d.length; i++){ }}
			<tr>
        		<td>{{i+1}}</td>
        		<td>
        			<a href="${ctx}/vote/router/route.do?topicId={{ d[i].tid }}">{{ d[i].title }}</a>
        			{{# if(d[i].diffDate < 7){ }}
        				<span class="label label-danger">NEW</span>
        			{{# } }}
       	 		</td>
        		<td>
        			{{# if(d[i].scope == '0'){ }}
        				所有人可投
        			{{# }else{  }}
        				会员可投
        			{{# } }}
        		</td>
        		<td class="text-warning">
        			{{# if(d[i].voteHot > 20){ }}
        				<span class="badge badge-danger">{{ d[i].voteHot }}</span>
        			{{# }else{  }}
        				<span class="badge badge-primary">{{ d[i].voteHot }}</span>
        			{{# } }}
	        	</td>
				{{# if(d[i].doStatus == 'doing'){ }}
						{{# if(d[i].voteStatus == '0'){ }}
							<td class="text-navy">
								未投票
							</td>
						{{# }else{ }}
							<td class="text-info">
								已投票
							</td>
						{{# } }}
        			{{# }else{  }}
						<td>
        					<del>已结束</del>
						</td>
        		{{# } }}
	        	<td>{{ d[i].create_time }}</td>
	        	<td>{{ d[i].deadline }}</td>
	    	</tr>
	    {{# }  }}
	</script>	
</body>
</html>
